import React, { useState } from 'react';

const Chat: React.FC = () => {
    const [messages, setMessages] = useState<string[]>([]);
    const [input, setInput] = useState<string>('');

    const handleSendMessage = () => {
        if (input.trim()) {
            setMessages([...messages, input]);
            setInput('');
        }
    };

    return (
        <div className="flex flex-col h-full p-4 border-r border-gray-300">
            {/* 返回按钮 */}
            <button className="mb-4 text-blue-500 hover:underline">返回上一页</button>

            {/* 聊天内容 */}
            <div className="flex-1 overflow-auto mb-4">
                <div className="space-y-4">
                    {messages.map((msg, index) => (
                        <div key={index} className="bg-gray-100 p-3 rounded-lg">
                            {msg}
                        </div>
                    ))}
                </div>
            </div>

            {/* 输入框 */}
            <div className="flex items-center border-t pt-4">
                <input
                    type="text"
                    className="flex-1 p-2 border rounded-md"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    placeholder="输入消息..."
                />
                <button
                    onClick={handleSendMessage}
                    className="ml-4 p-2 bg-blue-500 text-white rounded-md"
                >
                    发送
                </button>
            </div>
        </div>
    );
};

export default Chat;
